import { useState } from 'react';
import { Link } from 'react-router-dom';
import { Check } from 'lucide-react';
import Button from '../components/Button';
import { useLanguage } from '../contexts/LanguageContext';
import { useLocalizedLink } from '../hooks/useLocalizedLink';

const Pricing = () => {
  const [billingType, setBillingType] = useState<'traffic' | 'ip' | 'enterprise'>('traffic');
  const { t } = useLanguage();
  const { getLink } = useLocalizedLink();

  return (
    <div className="w-full">
      <section className="bg-[#0f1c3f] dark:bg-gray-800 text-white py-16 transition-colors duration-300">
        <div className="container mx-auto px-4 text-center">
          <h1 className="text-3xl md:text-4xl font-bold mb-4">
            {t('pricing.title')}
          </h1>
          <p className="text-xl text-gray-300 dark:text-gray-200 max-w-2xl mx-auto">
            {t('pricing.subtitle')}
          </p>
        </div>
      </section>

      <section className="bg-white dark:bg-gray-900 py-12 transition-colors duration-300">
        <div className="container mx-auto px-4">
          <div className="flex justify-center mb-12">
            <div className="inline-flex p-1.5 bg-gray-100 dark:bg-gray-800 rounded-xl shadow-inner transition-colors duration-300">
              <button 
                className={`px-8 py-3 rounded-lg text-sm font-medium transition-all duration-300 ${
                  billingType === 'traffic' 
                    ? 'bg-gradient-to-r from-[#0f1c3f] to-[#1a2a5e] dark:from-gray-700 dark:to-gray-600 text-white shadow-md' 
                    : 'text-gray-700 dark:text-gray-300 hover:text-[#0f1c3f] dark:hover:text-white'
                }`} 
                onClick={() => setBillingType('traffic')}
              >
                {t('pricing.billingTypes.traffic')}
              </button>
              <button 
                className={`px-8 py-3 rounded-lg text-sm font-medium transition-all duration-300 ${
                  billingType === 'ip' 
                    ? 'bg-gradient-to-r from-[#0f1c3f] to-[#1a2a5e] dark:from-gray-700 dark:to-gray-600 text-white shadow-md' 
                    : 'text-gray-700 dark:text-gray-300 hover:text-[#0f1c3f] dark:hover:text-white'
                }`} 
                onClick={() => setBillingType('ip')}
              >
                {t('pricing.billingTypes.ip')}
              </button>
              <button 
                className={`px-8 py-3 rounded-lg text-sm font-medium transition-all duration-300 ${
                  billingType === 'enterprise' 
                    ? 'bg-gradient-to-r from-[#0f1c3f] to-[#1a2a5e] dark:from-gray-700 dark:to-gray-600 text-white shadow-md' 
                    : 'text-gray-700 dark:text-gray-300 hover:text-[#0f1c3f] dark:hover:text-white'
                }`} 
                onClick={() => setBillingType('enterprise')}
              >
                {t('pricing.billingTypes.enterprise')}
              </button>
            </div>
          </div>

          {billingType === 'traffic' && (
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
              <div className="border border-gray-200 dark:border-gray-700 rounded-xl p-8 bg-white dark:bg-gray-800 transition-colors duration-300">
                <h3 className="text-xl font-bold text-[#0f1c3f] dark:text-white mb-2">
                  {t('pricing.plans.basic.name')}
                </h3>
                <div className="text-3xl font-bold dark:text-white mb-1">
                  {t('pricing.plans.basic.price')}
                  <span className="text-lg text-gray-500 dark:text-gray-400 font-normal">{t('pricing.plans.basic.period')}</span>
                </div>
                <p className="text-gray-600 dark:text-gray-300 mb-6">{t('pricing.plans.basic.description')}</p>
                <ul className="space-y-3 mb-8">
                  {t('pricing.plans.basic.features').map((feature: string, index: number) => (
                    <li key={index} className="flex items-start">
                      <Check className="text-[#00c853] mr-2 mt-1 flex-shrink-0" size={18} />
                      <span className="text-gray-700 dark:text-gray-300">{feature}</span>
                    </li>
                  ))}
                </ul>
                <Link to={getLink('/register')}>
                  <Button variant="outline" fullWidth>
                    {t('pricing.selectPlan')}
                  </Button>
                </Link>
              </div>

              <div className="border-2 border-[#00d4ff] rounded-xl p-8 bg-white dark:bg-gray-800 relative shadow-lg transition-colors duration-300">
                <div className="absolute top-0 right-0 bg-[#00d4ff] text-[#0f1c3f] dark:text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">
                  {t('pricing.plans.pro.popular')}
                </div>
                <h3 className="text-xl font-bold text-[#0f1c3f] dark:text-white mb-2">
                  {t('pricing.plans.pro.name')}
                </h3>
                <div className="text-3xl font-bold dark:text-white mb-1">
                  {t('pricing.plans.pro.price')}
                  <span className="text-lg text-gray-500 dark:text-gray-400 font-normal">{t('pricing.plans.pro.period')}</span>
                </div>
                <p className="text-gray-600 dark:text-gray-300 mb-6">{t('pricing.plans.pro.description')}</p>
                <ul className="space-y-3 mb-8">
                  {t('pricing.plans.pro.features').map((feature: string, index: number) => (
                    <li key={index} className="flex items-start">
                      <Check className="text-[#00c853] mr-2 mt-1 flex-shrink-0" size={18} />
                      <span className="text-gray-700 dark:text-gray-300">{feature}</span>
                    </li>
                  ))}
                </ul>
                <Link to={getLink('/register')}>
                  <Button variant="gradient" fullWidth>
                    {t('pricing.selectPlan')}
                  </Button>
                </Link>
              </div>

              <div className="border border-gray-200 dark:border-gray-700 rounded-xl p-8 bg-white dark:bg-gray-800 transition-colors duration-300">
                <h3 className="text-xl font-bold text-[#0f1c3f] dark:text-white mb-2">
                  {t('pricing.plans.business.name')}
                </h3>
                <div className="text-3xl font-bold dark:text-white mb-1">
                  {t('pricing.plans.business.price')}
                  <span className="text-lg text-gray-500 dark:text-gray-400 font-normal">{t('pricing.plans.business.period')}</span>
                </div>
                <p className="text-gray-600 dark:text-gray-300 mb-6">{t('pricing.plans.business.description')}</p>
                <ul className="space-y-3 mb-8">
                  {t('pricing.plans.business.features').map((feature: string, index: number) => (
                    <li key={index} className="flex items-start">
                      <Check className="text-[#00c853] mr-2 mt-1 flex-shrink-0" size={18} />
                      <span className="text-gray-700 dark:text-gray-300">{feature}</span>
                    </li>
                  ))}
                </ul>
                <Link to={getLink('/register')}>
                  <Button variant="outline" fullWidth>
                    {t('pricing.selectPlan')}
                  </Button>
                </Link>
              </div>
            </div>
          )}
        </div>
      </section>
    </div>
  );
};

export default Pricing;
